// 自营资金清算
<template>
    <div class="pageWrapper">
        <SearchBar class="form" @onSearch="handleSearch('search')" @childFn="resetForm">
            <SearchBarItem label="报表统计时间：">
                <DatePicker type="month" v-model="searchData.time" :options="options3" @on-change="searchTime" transfer  ref="clearDatePicker" style="width: 200px" placeholder="请选择年月"></DatePicker>
            </SearchBarItem>
        </SearchBar>

        <Row class="noRepor" v-if="!fromData.one && !fromData.two && !fromData.three">
            <p>当前月份还未生成报表</p>
            <Button type="primary" @click="handleSearch('click')">点击生成</Button>
        </Row>
        <div v-else>
            <Row class="handleBtn">
                <Authc permissions="trade:settlement:cmb">
                    <Button type="primary" @click="updataClearList" :disabled="isDisabled">更新报表</Button>
                </Authc>
                <Authc permissions="trade:settlement:cmb">
                    <Button type="primary" @click="handleDown">导出</Button>
                </Authc>
                <Authc permissions="trade:settlement:cmb">
                    <Button type="primary" @click="getOrderExport">未清算订单导出</Button>
                </Authc>
            </Row>

            <Row class="reporBox" id="demo">
                <Row class="reporHeader">
                    <h3>自营资金清算报表(所有场景)</h3>
                    <Col span="12">报表统计月份：{{ fromData.statistics_time }}</Col>
                    <Col class="textRight" span="12">报表生成日期：{{ fromData.generation_time }}</Col>
                </Row>
                <Table :columns="costColumn" :data="costData" border></Table>
                <Table :columns="allCostColumn" :data="twoCostData" border></Table>
                <Table :columns="detailsColumn" :data="threeCostData" border></Table>
            </Row>
        </div>
    </div>
</template>

<script>
import { Button, DatePicker, Row, Col, Table, Message } from "view-design";
import SearchBar from "@/components/SearchBar";
import Authc from "@/components/Authc";
import { namespace } from '../Module/autotrophyModule';
import util from '@/utils/util';
import htmlToPdf from '@/utils/htmlToPdf';

export default {
    name: "",
    components: {
        SearchBar,
        SearchBarItem: SearchBar.SearchBarItem,
        DatePicker,
        Button,
        Row,
        Col,
        Table,
        Authc,
        Message
    },
    data(){
        return {
            isDisabled: false,
            searchData: {},
            /** 第一个表格配置 **/
            options3: {
              disabledDate (date) {
                let nowTime = new Date()
                let month = nowTime.getMonth() + 1
                let year = nowTime.getFullYear()
                return date && date.valueOf() > new Date(`${year}-${month}`);
            }
          },
            costColumn: [
                {
                    title: ' ',
                    key: 'key',
                    align: "center",
                },
                {
                    title: '销售价(￥)',
                    key: 'value',
                    align: "center",
                },
                {
                    title: '手续费(￥)',
                    key: 'towValue',
                    align: "center",
                },
                {
                    title: '应清算资金(￥)',
                    key: 'threeValue',
                    align: "center",
                },
            ],
            /** 第一个表格数据 **/
            costData: [
                {
                    key: '商户云资金流水(银行)',
                    value: '',
                    towValue: '',
                    threeValue: ''
                },
                {
                    key: '交易中台资金流(平台)',
                    value: '',
                    towValue: '',
                    threeValue: ''
                },
                {
                    key: '差异',
                    value: '',
                    towValue: '',
                    threeValue: ''
                }
            ],
            /** 第二个表格配置 **/
            allCostColumn: [
                {
                    title: '本月下单本月核销订单(￥)',
                    key: 'month_settlement_amount',
                    align: "center",
                },
                {
                    title: '非本月下单本月核销订单(￥)',
                    key: 'no_month_settlement_amount',
                    align: "center",
                },
                {
                    title: '本月下单非本月核销(￥)',
                    key: 'month_no_settlement_amount',
                    align: "center",
                }
            ],
            /** 第二个表格数据 **/
            twoCostData: [
                {
                    month_settlement_amount: '',
                    no_month_settlement_amount: '',
                    month_no_settlement_amount: ''
                }
            ],
            /** 第三个表格配置 **/
            detailsColumn: [
                {
                    title: '核销日期',
                    key: 'settlement_date',
                    align: "center",
                },
                {
                    title: '核销金额(￥)',
                    key: 'settlementAmount',
                    align: "center",
                    render: (h, params) => {
                        let item = params.row.settlementAmount / 100;
                        return h('span', util.toMoney(item));
                    },
                },
                {
                    title: '手续费(￥)',
                    key: 'serviceCharge',
                    align: "center",
                    render: (h, params) => {
                        let item = params.row.serviceCharge / 100;
                        return h('span', util.toMoney(item));
                    },
                },
                {
                    title: '实际清算资金(￥)',
                    key: 'fact_settlement_amount',
                    align: "center",
                    render: (h, params) => {
                        let item = params.row.fact_settlement_amount / 100;
                        return h('span', util.toMoney(item));
                    },
                },
                {
                    title: '未清算金额(￥)',
                    key: 'not_settlement_amount',
                    align: "center",
                    render: (h, params) => {
                        let item = params.row.not_settlement_amount / 100;
                        return h('span', util.toMoney(item));
                    },
                }
            ],
            /** 第三个表格数据 **/
            threeCostData: [],
            fromData: {}
        }
    },
    created () {
        this.handleSearch('defined');
    },
    methods: {
        /** 导出 */
        handleDown(){
            htmlToPdf.downloadPDF( document.querySelector('#demo'), '自营资金清算报表');
        },
        /** 未清算订单导出 */
        async getOrderExport () {
            try {
                if (!this.searchData.year_month) {
                    this.$Message.warning({
                        content: '请选择报表时间'
                    })
                    return;
                }
                let params = {
                    year_month: this.searchData.year_month
                }
                let res = await this.$store.dispatch(`${namespace}/orderExport`, params);
                let date = new Date();
                let year = date.getFullYear();
                let month = date.getMonth();
                let day = date.getDate();
                util.exportExcle(res, `未清算金额订单明细${year}-${month+1}-${day}`);
            } catch (error) {
                this.$Message.error({
                    content: '导出失败'
                })
            }
        },
        // 范围统计
        searchTime (date, type) {
            this.searchData.year_month = date;
        },

        /** 更新报表 */
        async updataClearList () {
            try {
                if (!this.searchData.year_month) {
                    this.$Message.warning('请选择报表时间');
                    return;
                }
                this.isDisabled = true;
                let res = await this.$store.dispatch(`${namespace}/updataAutoList`, { ...this.searchData });
                if (res.data.ret === 0) {
                    this.$Message.success({
                        content: '更新成功'
                    });
                    this.isDisabled = false;
                    let data = res.data.data;
                    this.fromData = data;

                    if (!data.one && !data.two && !data.three) {
                        this.$Message.warning(`暂无${this.searchData.year_month}报表`)
                    }

                    /** one 银行测 */
                    this.costData[0].value = data.one ? util.toMoney(data.one.bank_selling_price / 100) : '';
                    this.costData[0].towValue = data.one ? util.toMoney(data.one.bankServiceCharge / 100) : '';
                    this.costData[0].threeValue = data.one ? util.toMoney(data.one.bank_liquidation_amount / 100) : '';
                    /** one 平台测 */
                    this.costData[1].value = data.one ? util.toMoney(data.one.selling_price / 100) : '';
                    this.costData[1].towValue = data.one ? util.toMoney(data.one.serviceCharge / 100) : '';
                    this.costData[1].threeValue = data.one ? util.toMoney(data.one.liquidation_amount / 100) : '';
                    /** one 差异 */
                    this.costData[2].value = data.one ? util.toMoney(data.one.diff_selling_price / 100) : '';
                    this.costData[2].towValue = data.one ? util.toMoney(data.one.diff_service_charge / 100) : '';
                    this.costData[2].threeValue = data.one ? util.toMoney(data.one.diff_liquidation_amount / 100) : '';

                    /** two */
                    // if (data.two !== '') {
                    this.twoCostData[0].month_settlement_amount = data.two ? util.toMoney(data.two.month_settlement_amount / 100) : '';
                    this.twoCostData[0].no_month_settlement_amount = data.two ? util.toMoney(data.two.no_month_settlement_amount / 100) : '';
                    this.twoCostData[0].month_no_settlement_amount = data.two ? util.toMoney(data.two.month_no_settlement_amount / 100) : '';
                    // }

                    /** three */
                    this.threeCostData = data.three.three_total;
                    if (this.threeCostData) {
                        this.threeCostData.push({ settlement_date: '本月合计', fact_settlement_amount: data.three.fact_settlement_amount_total, not_settlement_amount: data.three.not_settlement_amount_total, serviceCharge: data.three.service_charge_total, settlementAmount: data.three.settlement_amount_total })
                    }

                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },

        /** list */
        async handleSearch (type) {
            try {
                if (type === 'defined') {
                    var params = {
                        year_month: util.getYearMonth()
                    }
                } else if (type === 'search' || type === 'click') {
                    if (!this.searchData.year_month) {
                        this.$Message.warning('请选择报表时间');
                        return;
                    }
                }
                let res = await this.$store.dispatch(`${namespace}/getAutoList`, { ...this.searchData, ...params });
                if (res.data.ret === 0) {
                    let data = res.data.data;
                    this.fromData = data;

                    if (type !== 'defined' && !data.one && !data.two && !data.three) {
                        this.$Message.warning(`暂无${this.searchData.year_month}报表`)
                    }

                    /** one 银行测 */
                    this.costData[0].value = data.one ? util.toMoney(data.one.bank_selling_price / 100) : '';
                    this.costData[0].towValue = data.one ? util.toMoney(data.one.bankServiceCharge / 100) : '';
                    this.costData[0].threeValue = data.one ? util.toMoney(data.one.bank_liquidation_amount / 100) : '';
                    /** one 平台测 */
                    this.costData[1].value = data.one ? util.toMoney(data.one.selling_price / 100) : '';
                    this.costData[1].towValue = data.one ? util.toMoney(data.one.serviceCharge / 100) : '';
                    this.costData[1].threeValue = data.one ? util.toMoney(data.one.liquidation_amount / 100) : '';
                    /** one 差异 */
                    this.costData[2].value = data.one ? util.toMoney(data.one.diff_selling_price / 100) : '';
                    this.costData[2].towValue = data.one ? util.toMoney(data.one.diff_service_charge / 100) : '';
                    this.costData[2].threeValue = data.one ? util.toMoney(data.one.diff_liquidation_amount / 100) : '';

                    /** two */
                    // if (data.two !== '') {
                    this.twoCostData[0].month_settlement_amount = data.two ? util.toMoney(data.two.month_settlement_amount / 100) : '';
                    this.twoCostData[0].no_month_settlement_amount = data.two ? util.toMoney(data.two.no_month_settlement_amount / 100) : '';
                    this.twoCostData[0].month_no_settlement_amount = data.two ? util.toMoney(data.two.month_no_settlement_amount / 100) : '';
                    // }

                    /** three */
                    this.threeCostData = data.three.three_total;
                    if (this.threeCostData) {
                        this.threeCostData.push({ settlement_date: '本月合计', fact_settlement_amount: data.three.fact_settlement_amount_total, not_settlement_amount: data.three.not_settlement_amount_total, serviceCharge: data.three.service_charge_total, settlementAmount: data.three.settlement_amount_total })
                    }
                }
            } catch (error) {
                this.$Message.error({
                    content: error
                })
            }
        },
        resetForm() {
            this.$refs["clearDatePicker"].handleClear();
        }
    }
};
</script>
<style scoped>
.pageWrapper {
    padding: 10px;
}
.pageWrapper >>> .ivu-date-picker .ivu-picker-panel-body {
    display: block !important;
}
.form,
.handleBtn,
.reporBox {
    padding: 20px;
    background-color: #fff;
}
.handleBtn {
    margin-bottom: 10px;
}
.noRepor {
    height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.reporHeader {
    margin: 0 6px 10px 6px;
}
.reporHeader h3 {
    height: 50px;
    line-height: 50px;
    font-size: 32px;
    text-align: center;
    margin-bottom: 10px;
}
.textRight {
    text-align: right;
}
.reporBox .ivu-table-wrapper {
    margin-bottom: 20px;
}
</style>
